<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- faq -->
		<div class="faq">
			<div class="faqTop">FAQ</div>
			<div class="faqBody">
				<div v-for="(item, index) in list" @click="goDetils(item)" :key="index" class="faqItem hand f f-a-c f-j-b p-l-10 p-r-10">
					<div class="countNei">{{ item.title }}</div>
					<img src="/src/assets/user/2.png" class="img" alt="" />
				</div>
			</div>
		</div>
		<div style="margin-bottom: 60px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { FaqsLists } from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let total = ref(0);
	let pageNum = ref(1);
	let list = ref([]);
	onMounted(() => {
		faqList();
		window.addEventListener("scroll", handleScroll);
	});
	const faqList = async () => {
		let n = await FaqsLists({
			pageNum: pageNum.value
		});
		total.value = n.data.total;
		list.value = [...n.data.list];
	};
	const goDetils = item => {
		router.push({
			path: "/Details",
			query: {
				id: item.id
			}
		});
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "222222");
		pageNum.value = e;
		faqList();
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
		// pageNum.value = e;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: px(28) !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: px(28) !important;
	}

	::v-deep .el-tabs__header {
		margin: 0 !important;
	}

	::v-deep .el-tabs__nav-wrap::after {
		height: 0 !important;
	}

	::v-deep .el-tabs__item:hover {
		color: #000;
	}

	::v-deep .el-tabs__item.is-active {
		color: #000;
	}

	::v-deep .el-tabs__item {
		padding: 0 px(58);

		&:last-child {
			padding-right: 0;
		}
	}

	::v-deep .el-tabs__active-bar {
		background-color: #000 !important;
	}

	::v-deep .el-tabs {
		--el-tabs-header-height: 52px !important;
	}

	::v-deep .el-tabs__nav-next,
	.el-tabs__nav-prev {
		margin-top: 4px !important;
	}

	::v-deep .el-dropdown-menu__item:not(.is-disabled):focus {
		color: #000;
		background-color: #f7f7f9;
	}

	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 px(10);
	}

	.faq {
		width: 1280px;
		margin: 0 auto;

		.faqTop {
			font-size: 28px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: left;
			color: #02102e;
			margin-bottom: 35px;
		}

		.faqBody {
			width: 100%;
			border-radius: 16px;
			margin-bottom: 80px;

			.more {
				font-size: 16px;
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-decoration: underline;
				text-align: left;
				color: #8590a1;
				padding-left: 10px;
				margin: 24px 0;
			}

			.faqItem {
				height: 70px;
				border-bottom: 1px solid #dddee1;

				.countNei {
					font-size: 20px;
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					color: #02102e;
				}

				.img {
					height: 14px;
				}
			}
		}
	}
</style>
